<#import "macro.html" as m>
    <@m.page_header title='主页' />

    <div class="wrapper wrapper-content gray-bg">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <h2>添加用户</h2>
                    <form method="post" class="form-horizontal" action="/admin/addUser">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">用户名(唯一)：</label>
                            <div class="col-sm-6">
                                <input type="text" name="username" class="form-control" placeholder="用户名" value="" required="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">名称：</label>
                            <div class="col-sm-6">
                                <input type="text" name="name" class="form-control" placeholder="名称" value="" required="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">密码：</label>
                            <div class="col-sm-6">
                                <input type="text" name="password" class="form-control" placeholder="密码" value="" required="">

                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">站点名称：</label>
                            <div class="col-sm-6">
                                <input type="text" name="configName" class="form-control" placeholder="站点名称" value="" required="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">站点描述：</label>
                            <div class="col-sm-6">
                                <input type="text" name="description" class="form-control" placeholder="站点描述" value="" required="">

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">站点关键字：</label>
                            <div class="col-sm-6">
                                <input type="text" name="keywords" class="form-control" placeholder="站点关键字" value="" required="">

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">站点简介：</label>
                            <div class="col-sm-7">
                                <input type="text" name="introduce" class="form-control" placeholder="站点简介" value="" required="">

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">站点图标：</label>
                            <div class="col-sm-7">
                                <div class="input-group">
                                    <input type="text" name="favicon" class="form-control" placeholder="站点图标" value="/web/favicon.ico" required=""> <span class="input-group-btn">
                                    <button type="button" class="btn btn-primary" id="uploadFavicon">上传
                                        </button> </span>
                                </div>
                             </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary" type="submit">保存内容</button>
                            </div>
                        </div>
                    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog  modal-lg">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <h5 class="modal-title">上传图片</h5>
                </div>
                <div class="modal-body">
                    <div class="row fileupload-buttonbar">
                        <div class="thumbnail">
                            <img id="weixin_show" style="height:180px;margin-top:10px;margin-bottom:8px;"
                                 src="/static/admin/jquery_fileupload/theDefault.png" data-holder-rendered="true">
                            <div class="caption" align="center">
                                <input type="text" name="imagePath" id="imagePath" class="form-control" required="">
                                <span id="weixin_upload" class="btn btn-primary fileinput-button">
                                <span>上传</span>
                                <input type="file" id="file" name="file" accept="image/*" multiple>
                                </span>
                                <a id="weixin_cancle" href="javascript:void(0)" class="btn btn-warning" role="button"
                                   style="display:none">删除</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="modalSumit">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $("#file").change(function () {
                lrz(this.files[0],{width:800,quality:0.7}) .then(function (rst) { // 压缩图片处理成功会执行
                    //压缩后异步上传
                    $.ajax({
                        url : "/admin/fileUpload",
                        data: rst.formData,
                        processData: false,
                        contentType: false,
                        type: 'POST',
                        success : function(data) {
                            if (data.state) {
                                $("#weixin_show").attr("src", data.pathImage);
                                $("#imagePath").val(data.pathImage);
                                $("#weixin_upload").css({display: "none"});
                                $("#weixin_cancle").css({display: ""});
                            }
                        },
                        error : function(){
                            alert("上传失败");
                        }
                    });
                });
            });

            $("#weixin_cancle").click(function () {
                $("#weixin_show").attr("src", "/static/admin/jquery_fileupload/theDefault.png");
                $("#imagePath").val("");
                $("#weixin_upload").css({display: ""});
                $("#weixin_cancle").css({display: "none"});
            });
            $("#uploadFavicon").click(function () {
                $('#myModal').modal();
                $(".modal-backdrop").remove();
                if ($("input[name = 'favicon']").val() != '') {
                    $("#weixin_show").attr("src", $("input[name = 'favicon']").val());
                    $("#imagePath").val($("input[name = 'favicon']").val());
                    $("#weixin_upload").css({display: "none"});
                    $("#weixin_cancle").css({display: ""});
                }
            });

            $("#modalSumit").click(function () {
                if ($("#imagePath").val() != '') {
                    $("input[name = 'favicon']").val($("#imagePath").val());
                }
                $('#myModal').modal('hide');
            });

        });

    </script>

    <@m.page_footer />